<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv=X-UA-Compatible content="IE=edge">
		<meta name=viewport content="width=device-width, initial-scale=1.0, user-scalable=no">
		
		<title>Html5QRCode vue2</title>
		<!-- import CSS -->
		<link rel="stylesheet" href="./style/element-ui@2.15.13.css" />
		<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css" /> -->
	</head>
	<body>
		<div id="app">
			<div id="qr-reader" style="width: 500px;"></div>
			<el-form ref="form" :model="mDecodedResult" label-width="200px">
				<el-form-item label="text">
					<el-input v-model="mDecodedResult.text"></el-input>
				</el-form-item>
				<el-form-item label="decodedDateTime">
					<el-input v-model="mDecodedResult.decodedDateTime"></el-input>
				</el-form-item>
				<el-form-item label="format.format">
					<el-input v-model="mDecodedResult.format.format"></el-input>
				</el-form-item>
				<el-form-item label="format.formatName">
					<el-input v-model="mDecodedResult.format.formatName"></el-input>
				</el-form-item>
				<el-form-item label="debugData.decoderName">
					<el-input v-model="mDecodedResult.debugData.decoderName"></el-input>
				</el-form-item>
			</el-form>			
		</div>
	</body>
	<!-- import Vue before Element -->
	<script src="./script/vue@2.7.14.js"></script>
	<!-- <script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script> -->

	<!-- import Vue Router -->
	<script src="./script/vue-router@3.6.5.js"></script>
	<!-- <script src="https://unpkg.com/vue-router@3.6.5/dist/vue-router.js"></script> -->

	<!-- import JavaScript -->
	<script src="./script/element-ui@2.15.13.js"></script>
	<!-- <script src="https://unpkg.com/element-ui@2.15.13/lib/index.js"></script> -->

	<!-- import 引入 html5-qrcode 库 -->
	<script src="./script/html5-qrcode@2.3.8.min.js"></script>

	<script>		
		var vueApp = new Vue({
			el: "#app",
			data: function () {
				return {
					mDecodedResult: {
						debugData: { decoderName: null },
						decodedDateTime: null,
						format: {
							format: null,
							formatName: null,
						},
						text: null
					},
				};
			},
			mounted: function() {        
        		let html5QrcodeScanner = new Html5QrcodeScanner("qr-reader", { fps: 10, qrbox: 250 });
				// let html5QrcodeScanner = new Html5QrcodeScanner("qr-reader", { fps: 10, qrbox: 500 }); // 控制解释图像的大小
				// let html5QrcodeScanner = new Html5QrcodeScanner("qr-reader", { fps: 1, qrbox: 250 }); // 控制 fps
        		html5QrcodeScanner.render(this.onScanSuccess);
    		},
			methods: {
				onScanSuccess: function(decodedText, decodedResult) {  
					// 添加扫描时间
					decodedResult.result.decodedDateTime = new Date().toLocaleString();
					this.mDecodedResult = decodedResult.result;
				},
			},
		});
	</script>
	<style>		
	</style>
</html>
